import Taro, {getCurrentInstance} from "@tarojs/taro";

import { Component } from 'react'
import { connect } from 'react-redux'

import {View, Button, Input, Textarea, Picker} from '@tarojs/components'
import './publish.less'
import {updateTopic, submitTopic} from "../../../actions/topiclist";

// #region 书写注意
//
// 目前 typescript 版本还无法在装饰器模式下将 Props 注入到 Taro.Component 中的 props 属性
// 需要显示声明 connect 的参数类型并通过 interface 的方式指定 Taro.Component 子类的 props
// 这样才能完成类型检查和 IDE 的自动提示
// 使用函数模式则无此限制
// ref: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20796
//
// #endregion

type PageStateProps = {
  menu: {
    cataData: {
      key: '',
      value: ''
    },
    currentCata: any,
    showDrawer: any
  },
  topic: {
    topicinfo: {
      id: '',
      title: '',
      content : ''
    },
    replies: [],
    admireState: false  //点赞状态
  },
  user: {
    accesstoken: '',
    type: '',
    avatar_url: ""
    id: ""
    loginname: ""
    success: false
  },
}

type PageDispatchProps = {
  add: () => void
  dec: () => void
  asyncAdd: () => any
}

type PageOwnProps = {}

type PageState = {}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps & PageState

interface Publish {
  props: IProps;
}

// @ts-ignore
@connect(({ menu, user, topic }) => ({
  menu, user, topic
}))
class Publish extends Component {

  state = {
    selectCata: {
      value : ''
    },
    title: null,
    content: null,
    isEdit: false,
    topicinfo: {
      title: '',
      content: ''
    }
  };

  componentDidMount() {
    // @ts-ignore
    const {edit} = this.$instance.router.params;
    let { topic: {topicinfo} } = this.props;
    this.setState({
      isEdit: edit == '1',
      topicinfo: topicinfo,
      title: topicinfo ? topicinfo.title : '',
      content: topicinfo ? topicinfo.content : ''
    });
  }

  componentWillReceiveProps (nextProps) {
    console.log(this.props, nextProps)
  }

  // 建议在页面初始化时把 getCurrentInstance() 的结果保存下来供后面使用，
  // 而不是频繁地调用此 API
  $instance = getCurrentInstance();

  changeCata(event) {
    let { menu: {cataData} } = this.props;
    this.setState({ selectCata: cataData[event.detail.value] })
  }

  // 标题改变
  titleChange(event) {
    if (event && event.target) {
      this.setState({ title: event.target.value });
    }
  }

  // 内容改变
  contentChange(event) {
    this.setState({ content: event.detail.value })
  }

  //提交
  submitTopic() {
    let { title, content, selectCata, isEdit } = this.state;
    let { user: {accesstoken}, topic: {topicinfo} } = this.props;
    if (title && content && selectCata) {
      let params = { tab: 'dev', title, content, accesstoken, topic_id: topicinfo.id };
      if (isEdit) {
        updateTopic(params).then(result => {
          if (result) {
            Taro.navigateBack();
          }
        })
      } else {
        submitTopic(params).then(result => {
          if (result) {
            Taro.redirectTo({ url: '/pages/user/user' });
          }
        })
      }
    } else {
      Taro.showToast({ title: '分类或者标题内容都不能为空!', icon: 'none' })
    }
  }

  render () {
    console.log('------publish, props: ', this.props);

    let { menu: {cataData} } = this.props;

    let { selectCata } = this.state;

    return (
      <View className='publish-topic'>
        <Input
          type='text'
          // value={isEdit ? (topicinfo ? topicinfo.title : '') : ''}
          className='publish-topic-title'
          onInput={(e)=>this.titleChange(e)}
          placeholder='请输入你要发布的标题'
        />
        <Textarea
          // value={isEdit ? (topicinfo ? topicinfo.content : '') : ''}
          className='publish-topic-content'
          onInput={(e)=>this.contentChange(e)}
          placeholder='请输入您要发布的内容'
        />
        {
          // @ts-ignore
          <Picker onChange={this.changeCata.bind(this)} mode='selector' range={cataData} rangeKey='value'>
            <View className='publish-topic-cata'>{selectCata ? selectCata.value : '请选择'}</View>
          </Picker>
        }
        <Button
          className='publish-topic-btn'
          onClick={()=>this.submitTopic()}
        >
          提交
        </Button>
      </View>)
  }
}

export default Publish

